import * as React from 'react';
import {render} from 'react-dom';
import {observer} from 'mobx-react';
import {toJS} from 'mobx';
import { Layout,Menu, Icon, Switch,Breadcrumb} from 'antd';
import { Link } from 'react-router';
import {RouterList} from '../../routerList/RouterList';
import {RouterBean} from '../../routerList/RouterBean'
import  './MenuStyle.less';
const SubMenu = Menu.SubMenu;
const Sider = Layout.Sider;
import { layoutStore} from '../layout/LayoutStore';
@observer
export class AdminMenu extends React.Component<any,any> {
    onOpenChange(me){
        let _self = this;

        return function(openKeys){
            const state = layoutStore.layoutBean;
            const latestOpenKey = openKeys.find(key => !(state.openKeys.indexOf(key) > -1));
            const latestCloseKey = state.openKeys.find(key => !(openKeys.indexOf(key) > -1));

            let nextOpenKeys = [];
            if (latestOpenKey) {
                nextOpenKeys = _self.getAncestorKeys(latestOpenKey).concat(latestOpenKey);
            }
            if (latestCloseKey) {
                nextOpenKeys = _self.getAncestorKeys(latestCloseKey);
            }
           
            layoutStore.setOpenKeys(nextOpenKeys);
        }
    }

    getAncestorKeys(key){
        return [];
    }

    handleClick(e) {
        layoutStore.setCurrent(e.key);
    }
    render() {
         return(
                <Menu className="admin-menu"  theme="dark"
                    mode={layoutStore.layoutBean.mode}
                   // defaultOpenKeys={layoutStore.layoutBean.openKeys}  
                    openKeys={layoutStore.layoutBean.openKeys}  
                    selectedKeys={[layoutStore.layoutBean.current]} 
                    onClick={this.handleClick} 
                    onOpenChange={this.onOpenChange(this)}>
                    {
                        RouterList.map(function(item:RouterBean){
                            if(item.type == 'SubMenu'){
                                return <SubMenu key={item.key} title={<span><Icon type={item.icon} /><span className="nav-text">{item.title}</span></span>}>
                                    {
                                        item.children.map(function(subItem:RouterBean){
                                            return <Menu.Item key={subItem.key}><Link to={subItem.link}>{subItem.icon?<Icon type={subItem.icon} />:''}<span>{subItem.title}</span></Link></Menu.Item>
                                        })
                                    }
                                </SubMenu>
                            }else if(item.type == 'Item'){
                                return <Menu.Item key={item.key}><Link to={item.link}>{item.icon?<Icon type={item.icon} />:''}<span className="nav-text">{item.title}</span></Link></Menu.Item>
                            }
                        })
                    }      
                </Menu>
           )
    }
}
